<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
    <link href="lazyLoad.css" rel="stylesheet" type="text/css"/>
    <style>

    </style>
</head>
<body>
<div class="photo">
    <img src="img/S70118-122304.jpg" data-src="img/0.jpg" alt="pic1" class="img"/>
    <img src="img/S70118-122304.jpg" data-src="img/640.jpg" alt="pic2" class="img"/>
    <img src="img/S70118-122304.jpg" data-src="img/800.jpg" alt="pic3" class="img"/>
    <img src="img/S70118-122304.jpg" data-src="img/136873613.jpg" alt="pic4" class="img"/>
    <img src="img/S70118-122304.jpg" data-src="img/S70118-122543.jpg" alt="pic4" class="img"/>
    <img src="img/S70118-122304.jpg" data-src="img/S70118-122506.jpg" alt="pic5" class="img"/>
    <img src="img/S70118-122304.jpg" data-src="img/S70118-122543.jpg" alt="pic5" class="img"/>
    <img src="img/S70118-122304.jpg" data-src="img/0.jpg" alt="pic1" class="img"/>
    <img src="img/S70118-122304.jpg" data-src="img/640.jpg" alt="pic2" class="img"/>
    <img src="img/S70118-122304.jpg" data-src="img/800.jpg" alt="pic3" class="img"/>
    <img src="img/S70118-122304.jpg" data-src="img/136873613.jpg" alt="pic4" class="img"/>
</div>
<script src="lazyLoad.js"></script>
<script>
//    window.onscroll=function(){
//        if(!lazy.flag){
//            return;
//        }
//        lazy.flag=0;
//        setTimeout(lazy.checkImgs,1000);
//    }
//var flag=1;
//function isInsight(el){
//    //表示图片到可视区域距离，top、right、botton、left、width、height
//    const bound=el.getBoundingClientRect();
//    //可视区域的高度
//    const clientHeight=window.innerHeight;
//    //当图片到可视区域顶部距离越来越小的时候，也就是他马上就要出现在可视区域，从下到上
//   return bound.top<=clientHeight+100;//离底部100时就开始加载。
//}

//加载图片
//function checkImgs(){
//    flag=1;
//    const imgs=document.querySelectorAll(".img");
//    Array.from(imgs).forEach(el=>{
//        if(isInsight(el)){
//            loadImg(el);
//        }
//    })
//}
//function loadImg(el){
//    if(!el.flag){
//        const source=el.getAttribute("data-src");
//        el.src=source;
//        el.flag=true;
//    }
//
//}



</script>
</body>
</html>